import React from 'react';
import {View, StatusBar, Appearance, StyleSheet} from 'react-native';
import {connect} from 'react-redux';
import {setUserInfo} from '../../store/actions';
import storage from '../../utils/storage';
import {dark, light} from '../../config';

/**
 * APP入口页面 等待加载缓存
 * @colorScheme 用户手机主题模式 是否开启了黑夜模式
 * */
const colorScheme = Appearance.getColorScheme() === 'dark' ? dark : light;

class Await extends React.Component {
  constructor(props) {
    super(props);
    this.loadStorage();
  }

  loadStorage = () => {
    // 获取用户存储信息
    storage
      .load({
        key: 'userInfo',
      })
      .then(res => {
        this.props.setUserInfo({userInfo: res});
        this.props.navigation.replace('Home');
      })
      .catch(error => {
        this.props.navigation.replace('Home');
      });
  };

  componentDidMount() {}

  componentDidUpdate() {}

  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          backgroundColor="transparent"
          barStyle={colorScheme.barStyle}
          translucent={true}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    backgroundColor: colorScheme.backgroundColor,
  },
});

const mapStateToProps = state => {
  return {
    userInfo: state.$userInfo.userInfo,
  };
};
const mapDispatchToProps = dispatch => {
  return {
    setUserInfo: userInfo => {
      dispatch(setUserInfo(userInfo));
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Await);
